<template>
  <el-container>
    <!-- 左侧导航栏 -->
    <el-aside width="200" class="aside">
      <div class="logo">
        <img src="../../assets/image/ys.png" />
      </div>

      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :router="true"
      >
        <elSubMenu :sideMenu="menuList"></elSubMenu>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- header布局 -->
      <el-header class="el-header">
        <el-row
          type="flex"
          class="row-bg"
          justify="space-between"
          style="height: 100%"
        >
          <el-col :span="6">
            <div class="icon">
              <i
                :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                @click="isCollapse = !isCollapse"
                style="color: #fff"
              ></i>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="grid-content bg-purple-light">一个神奇的管理系统</div>
          </el-col>

          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div class="center">
                <!-- 头像 -->
                <div>
                  <el-avatar icon="el-icon-user-solid"></el-avatar>
                </div>
                <!-- 退出按钮 -->
                <a href="#" @click.prevent="quit" class="quit"><b>退出</b></a>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-header>

      <!-- main布局 -->
      <!-- 面包屑导航 -->
      <el-main class="el-main">
        <div class="Breadcrumb-nav">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item
              v-for="item of breadcrumb"
              :key="item.meta.name"
              :to="{ path: item.meta.fullPath }"
            >
              {{ item.meta.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.logo {
  text-align: center;
}
.logo img {
  height: 60px;
  display: block;
  margin: auto;
}

.el-container {
  height: 100%;
}

.el-row--flex.is-justify-space-between {
  align-items: center;
}

.center {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.Breadcrumb-nav {
  height: 40px;
}

.el-aside {
  border-right: 1px solid #fff;
}

.el-menu {
  border-right: 0;
}

.icon i {
  font-size: 34px;
  cursor: pointer;
}

.aside {
  /* background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%); */
  background-color: rgb(34, 46, 60);
}

.el-header {
  /* background-image: linear-gradient(15deg, #80d0c7 0%,#13547a 100%); */
  background-color: rgb(34, 46, 60);
}

.el-main {
  background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
}

.aside >>> .el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.quit {
  text-decoration: none;
  color: #fff;
  margin-left: 20px;
}

.bg-purple-light {
  text-align: center;
  color: #fff;
}

>>> .el-menu[data-v-6d720fe5] {
  background-color: rgb(34, 46, 60);
}

>>> .el-menu-item * {
  color: rgba(233, 236, 239, 0.5);
}

>>> .el-submenu__title * {
  color: rgba(233, 236, 239, 0.5);
}

>>> .el-menu-item:focus,
>>> .el-menu-item:hover {
  background-color: rgb(36, 52, 73);
  color: #fff;
}

>>> .el-submenu__title:hover {
  background-color: rgb(36, 52, 73);
}

>>> .el-menu-item-group > ul {
  background-color: rgb(34, 46, 60);
}

>>> .el-menu-item.is-active {
  color: #fff;
}
</style>

<script>
import { mapState } from "vuex";
import elSubMenu from "@/components";
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    quit() {
      // 1、跳转到login页面
      this.$router.push("/login");
      // 2、清空token
      localStorage.removeItem("token");
      // 清除登录信息
      localStorage.removeItem("userInfo");
      // 3、重新刷新页面，避免其他用户权限缓存
      location.reload();
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
  mounted() {
    // this.$store.dispatch("SET_SIDEMENU");
    // getMenuList().then(res=>{
    //   console.log(res);
    // })
  },
  computed: {
    ...mapState(["menuList"]),
    ...mapState(["breadcrumb"]),
  },
  components: {
    elSubMenu,
  },
};
</script>
